<template>
	<view class="container">
		<view class="tui-upload-item">
			<image :src="$cdn.actCoverImg + activity.coverImg" mode="aspectFill" style="width: 100%;height: 100%; border-radius: 2%;" lazy-load="true"></image>
		</view>
		
		<view class="tui-news-title">{{activity.actTitle}}</view>
<!-- 		<view class="tui-sub-info">
			<view class="tui-sub-left">
				<text class="tui-author">早安君</text>
				<text>昨天 17:12</text>
			</view>
			<view class="tui-sub-right">阅读 2453</view>
		</view> -->

		<tui-card class="publish-content" @headClick="toMemberDetail(memberBase.memberId,memberBase.userName)" :imageUrl="$cdn.appAvatar+memberBase.headPic" :titleText="memberBase.userName" :full="true">
			<template v-slot:body>
				<view class="tui-default">聚会时间：{{tui.geetWeek(activity.startTime)+' '+activity.startTime.substring(5,16)+' 至 '+activity.endTime.substring(5,16)}} </view>
				<!-- <view class="tui-default">结束时间：{{activity.endTime}}</view> -->
				
				<!-- 微信 -->
				<block v-if="isJoin && activity.linkmanWx">
					<view style="color: blue !important;" @tap="copyText(activity.linkmanWx)" class="tui-default">
						联系微信：{{activity.linkmanWx}}</view>
				</block>
				<block v-else>
				<view style="color: blue !important;" v-if="activity.linkmanWx" class="tui-default">
					联系微信：报名可见</view>
				</block>
				
				<!-- 电话 -->
				<block v-if="isJoin && activity.linkmanPhone">
					<view style="color: blue !important;" @tap="phoneCall(activity.linkmanPhone)" class="tui-default">
						联系电话：{{activity.linkmanPhone}}</view>
				</block>
				<block v-else>
				<view style="color: blue !important;" v-if="activity.linkmanPhone" class="tui-default">
					联系电话：报名可见</view>
				</block>
				
				<block v-if="isJoin">
					<view class="tui-default" style="color: blue !important;" @tap="alertShow=true">群二维码：点击查看</view>
				</block>
				<view v-else class="tui-default" style="color: blue !important;">群二维码：报名可见</view>
				<view class="tui-default">组织酬劳：{{activity.reward ? activity.reward+'元':'公益免费'}}</view>
			</template>
			<template v-slot:footer>
				<view class="tui-default" @tap="goLocation">聚会地点：{{activity.place}}
				<tui-icon style="margin-left: 10rpx;" name="send" :size="18"></tui-icon>
				</view>
			</template>
		</tui-card>

		<view class="tui-news-content">
			<view v-html="activity.actDesc"></view>
		</view>
		<view class="tui-operation">
			<view class="tui-operation-left tui-col-7 tui-height-full tui-ptop-zero">
				<block v-if="isJoin && !dateUtil.compareDate(new Date(),this.activity.endTime)">
					<button class="tui-btm" type="default" disabled="true">已报名</button>
				</block>
				<button v-if="!isJoin && !dateUtil.compareDate(new Date(),this.activity.endTime)" class="tui-btm" type="warn" @tap="toOpenJoinModal">报名</button>
				<button v-if="dateUtil.compareDate(new Date(),this.activity.endTime)" class="tui-btm" type="default" disabled="true">聚会已结束</button>
				<button shape="circle" @tap="actJoinSucc" type="green" class="tui-btm-small">已报 {{joinActNums}}</button>
			</view>
			<view class="tui-operation-right tui-right-flex tui-col-5">
				<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150">
					<button open-type="share" class="tui-share-btn"><tui-icon name="share" :size="31" color="#444"></tui-icon></button>
				</view>
			</view>
		</view>
		
		<block v-if="isJoin">
			<tui-modal :show="alertShow" @cancel="alertShow=false" :fadein="true" :custom="true" class="tui-modal-box-customer">
				<view class="tui-modal-custom-qrcode">
					<image :src="$cdn.actGroupQR + activity.qrcode" class="tui-tips-img" mode="aspectFit"></image>
					<p>截屏后扫码加入</p>
					<!-- <tui-button type="danger" shape="circle" @click="alertShow=false"></tui-button> -->
				</view>
			</tui-modal>
		</block>
		
		<block v-if="!isJoin">
			<tui-modal :show="alertJoinShow" @cancel="alertJoinShow=false" :custom="true" :fadein="true">
				<view class="tui-modal-custom">
					<tui-list-cell :hover="false">
						<view class="tui-line-cell">
							<view class="tui-title">微信号</view>
							<input placeholder-class="phcolor" class="tui-input" v-model="linkmanWx" placeholder="请输入联系微信号" maxlength="50" type="text" />
						</view>
					</tui-list-cell>
					<tui-list-cell :hover="false">
						<view class="tui-line-cell">
							<view class="tui-title">手机号</view>
							<input placeholder-class="phcolor" placeholder="请输入手机号(选填)" class="tui-input" v-model="phone" maxlength="11" type="text" />
						</view>
					</tui-list-cell>
					<tui-button style="margin-top: 140rpx;text-align: center;" shape="circle" @click="joinAct" >提交报名</tui-button>
					<view class="tui-tips" style="color: red;">{{alertJoinShowTip}}</view>
				</view>
			</tui-modal>
		</block>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import tuiIcon from '@/components/icon/icon';
import tuiTag from '@/components/tag/tag';
import tuiListCell from '@/components/list-cell/list-cell';
import tuiLoadmore from '@/components/loadmore/loadmore';
import tuiNomore from '@/components/nomore/nomore';
import tuiBadge from '@/components/badge/badge';
import tuiCard from '@/components/card/card';
import tuiButton from "@/components/button/button"
import tuiModal from "@/components/modal/modal"
import tuiAlert from "@/components/extend/alert/alert"
const dateUtil = require('../../common/dateUtil.js');
export default {
	computed: mapState(['wxNo']),
	components: {
		tuiIcon,
		tuiTag,
		tuiListCell,
		tuiLoadmore,
		tuiNomore,
		tuiBadge,
		tuiCard,
		tuiButton,
		tuiAlert,
		tuiModal
	},
	onLoad: function(e) {
		if (e.actId!=null ) {
			this.actId = e.actId;
			this.geActDetail(e.actId);
		}
	},
	data() {
		return {
			$cdn:this.$cdn,
			actId:'',
			activity:{},
			memberBase: {},
			dateUtil:dateUtil,
		    joinActNums: 0,
			isJoin:false,
			imageData:{},
			titleData:{},
			alertShow:false,
			alertJoinShow:false,
			linkmanWx:'',
			phone:'',
			alertJoinShowTip:''
		};
	},
	computed: {},
	methods: {
		// 复制到粘贴板
		copyText(text){
			uni.setClipboardData({data:text,success() {
				// this.tui.toast('复制成功');
			}});
		},
		getActStatus(){
			return dateUtil.compareDate(new Date(),this.activity.endTime);
		},
		// 点击电话则拨打
		phoneCall(tel){
			uni.makePhoneCall({phoneNumber:tel});
		},
		toOpenJoinModal(){
			this.linkmanWx=this.wxNo;
			this.alertJoinShow=true;
		},
		toMemberDetail(memberId, userName) {
			uni.navigateTo({
				url: '../member/member-detail?memberId=' + memberId + '&userName=' + userName
			});
		},
		joinAct(){
			if(this.linkmanWx==''){
				this.alertJoinShowTip='微信号不能为空';
				return false;
			}
			let postData = { actId: this.actId,linkmanWx:this.linkmanWx,phone:this.phone };
			this.tui
				.request('/auth/api/act/joinAct', postData, 'POST', false, true)
				.then(res => {
					if (res.code == 0) {
						this.alertShow=false;
						this.alertJoinShow=false;
						this.tui.toast('报名成功', 1000, true);
						this.geActDetail(this.actId);
					}else{
						this.tui.toast(res.msg, 2000, false);
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		actJoinSucc:function(){
			uni.navigateTo({
				url: 'act-join-success?actId='+this.actId
			});
		},
		geActDetail(actId) {
			let postData = { actId: actId };
			this.tui
				.request('/api/act/get.short', postData, 'POST', false, true)
				.then(res => {
					if (res.code == 0) {
						console.log('geActDetail=' + JSON.stringify(res));
						this.activity = res.data.act;
						this.memberBase = res.data.member;
						this.joinActNums = res.data.joinActNums;
						this.isJoin=res.data.isJoin;
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		goLocation(){
			let activity=this.activity;
			uni.openLocation({
				name: activity.place,
				address: activity.place,
				latitude:Number(activity.latitude),
				longitude:Number(activity.longitude),
				scale: 18
			});
		}
	}
};
</script>

<style scoped>
/* @import '../../static/style/thorui.css'; */
page {
	background: #fff;
	color: #333;
}

.container {
	padding: 10rpx 30rpx 110rpx 30rpx;
	box-sizing: border-box;
}

.tui-news-title {
	font-size: 32rpx;
	font-weight: 400;
	text-align: justify;
}

.tui-sub-info {
	padding-top: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
	color: #999;
}

.tui-author {
	color: #5677fc;
	padding-right: 20rpx;
}

.tui-news-content {
	padding-top: 30rpx;
	/* text-align: center; */
	margin-bottom: 140rpx;
}

.tui-article {
	/* text-indent: 2em; */
	font-size: 34rpx;
	padding-bottom: 40rpx;
	line-height: 60rpx;
	text-align: justify;
	word-break: break-all;
	word-wrap: break-word;
}

.tui-article-pic {
	width: 100%;
	display: block;
	margin-bottom: 40rpx;
}

.tui-news-source {
	font-size: 24rpx;
	color: #999;
}

.tui-operate-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 60rpx 40rpx;
	box-sizing: border-box;
}

.tui-tag-class {
	min-width: 130rpx;
	padding: 20rpx 52rpx !important;
	font-size: 26rpx !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-black {
	color: #333;
	padding-left: 12rpx;
}

.tui-cmt-title {
	font-size: 30rpx;
	font-weight: bold;
	position: relative;
}

.tui-cmt-title::after {
	content: '';
	position: absolute;
	left: -18rpx;
	top: 18%;
	width: 6rpx;
	height: 64%;
	background: #5677fc;
}

.tui-cmtbox {
	padding-bottom: 20rpx;
}

.tui-cmt-cell {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: 44rpx;
}

.tui-avatar {
	width: 64rpx;
	height: 64rpx;
	border-radius: 32rpx;
	display: block;
	flex-shrink: 0;
}

.tui-cmt-detail {
	width: 100%;
	padding-left: 16rpx;
	box-sizing: border-box;
}

.tui-header-box {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	font-size: 30rpx;
}

.tui-cmt-nickname {
	color: #5677fc;
}

.tui-fabulous {
	color: #9a9a9a;
}

.tui-fabulous text {
	padding-right: 4rpx;
	font-size: 24rpx;
}

.tui-cmt-content {
	font-size: 32rpx;
	color: #333;
	text-align: justify;
	padding-top: 8rpx;
	word-break: break-all;
	word-wrap: break-word;
}

.tui-reply-box {
	border-radius: 8rpx;
	overflow: hidden;
	margin-top: 16rpx;
}

.tui-cell-class {
	flex-direction: column;
	justify-content: flex-start !important;
	padding: 20rpx !important;
	text-align: justify;
	word-break: break-all;
	word-wrap: break-word;
}

.tui-cell-last {
	color: #5677fc;
}

.tui-flex-1 {
	flex: 1;
	width: 100%;
}

.tui-reply-nickname {
	font-size: 24rpx;
	color: #7a7a7a;
	padding-bottom: 8rpx;
}

.tui-footer {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	margin-top: 16rpx;
	color: #9a9a9a;
}

.tui-primary {
	color: #5677fc !important;
}

.tui-ml {
	margin-left: 16rpx;
}

.tui-cell-last .tui-icon-class {
	width: 40rpx !important;
	margin-left: -10rpx;
}

.tui-operation {
	width: 100%;
	height: 120rpx;
	overflow: hidden;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99999;
	padding-bottom: 10rpx;
	/* padding-bottom: env(safe-area-inset-bottom); */
}

.tui-safearea-bottom {
	width: 100%;
	height: env(safe-area-inset-bottom);
}

.tui-operation::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	border-top: 1rpx solid #eaeef1;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.tui-operation-left {
	display: flex;
	align-items: center;
}

.tui-operation-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
}

.tui-operation-right {
	height: 100rpx;
	box-sizing: border-box;
	padding-top: 0;
}

.tui-badge-class {
	color: #5677fc !important;
	position: absolute;
	top: -6rpx;
	padding: 2px 4px !important;
	/* #ifdef H5 */
	transform: translateX(50%) scale(0.8);
	/* #endif */
}

.tui-right-flex {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-col-7 {
	width: 80%;
}

.tui-col-5 {
	width: 20%;
}

.tui-share-btn {
	display: block;
	background: none;
	margin: 0;
	padding: 0;
}

.tui-default {
	padding: 20upx 30upx;
}
.publish-content{
	margin-top: 10rpx !important;
}
	.tui-btm {
		height: 70rpx;
		margin: 20rpx 20rpx 20rpx 30rpx;
		width: 50%;
		font-size: 34rpx;
		line-height: 70rpx;
		border-radius:20rpx !important;
	}
	.tui-btm-small {
		height: 70rpx;
		margin: 20rpx 20rpx 20rpx 30rpx;
		width: 50%;
		font-size: 24rpx;
		line-height: 70rpx;
		color: white;
		background-color: #5677FC;
	}
	
	.tui-modal-box-customer{
		width: 90% !important;
		left: 20% !important;
		top: 20% !important;
	}
	.tui-modal-box{
		top:35% !important;
	}
	.tui-modal-custom {
		text-align: center;
		/* height: 460rpx; */
	}
	.tui-tips-img {
		/* text-align: center; */
		width: 100%;
		height:  94%;
		/* margin-top: 20rpx; */
	}
	.tui-modal-custom-qrcode {
		text-align: center;
		height: 700rpx;
	}
	
	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}
	.tui-title {
		line-height: 32rpx;
		flex-shrink: 0;
	}
	
	.tui-input {
		font-size: 38rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
		justify-content: left;
	}
	.tui-upload-item {
		width: 100%;
		height: 390rpx;
		border: 1rpx solid #e6e6e6;
		box-sizing: border-box;
		border-radius: 4rpx;
		margin-top: 0rpx;
		margin-bottom: 10rpx;
	}
</style>
